<!-- banner列表 -->
{include file="common:header" /}
<link rel="stylesheet" href="/assets/plugins/bower_components/dropify/dist/css/dropify.min.css">
{include file="common:side" /}
    <div id="page-wrapper">
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid m-banner" id="m_main">
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title">banner广告管理</h2>
            </div>
            <div class="white-box">
              <form action="">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="control-label">标题</label>
                      <input type="text" class="form-control" placeholder="填写" v-model="title">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="control-label">链接</label>
                      <input type="text" class="form-control" placeholder="填写" v-model="link">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <div v-if="id == ''" class="form-group">
                      <label class="input-file-now">图片</label>
                      <input type="file" id="input-file-now" class="dropify" style="display:block">
                    </div>
                    <div v-if="id != ''" class="form-group">
                      <label class="input-file-now">图片</label>
                      <!-- <div class="dropify-wrapper has-preview">
                        <div class="dropify-message">
                          <span class="file-icon"></span>
                          <p>Drag and drop a file here or click</p>
                          <p class="dropify-error">Ooops, something wrong appended.</p>
                        </div>
                        <div class="dropify-loader" style="display: none;"></div>
                        <div class="dropify-errors-container"><ul></ul></div> -->
                        <input type="file" id="input-file-now-custom-1" class="dropify" :data-default-file="photo">
                        <!-- <button type="button" class="dropify-clear">Remove</button>
                        <div class="dropify-preview" style="display: block;">
                          <span class="dropify-render">
                            <img :src="photo">
                          </span>
                          <div class="dropify-infos">
                            <div class="dropify-infos-inner">
                              <p class="dropify-filename">
                                <span class="file-icon"></span>
                                <span class="dropify-filename-inner">{{title}}</span>
                              </p><p class="dropify-infos-message">Drag and drop or click to replace</p>
                            </div>
                          </div>
                        </div>
                      </div> -->
                    </div>
                  </div>
                </div>
                <div class="form-actions m-b-30">
                  <a class="btn btn-info m-t-10" @click="submitEvent">添加</a>
                </div>
              </form>
              <div class="table-responsive">
                <table id="myTable" class="table table-striped color-table info-table">
                  <thead>
                    <tr>
                      <th>创建时间</th>
                      <th>序号</th>
                      <th>标题</th>
                      <th>链接</th>
                      <th>图片</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in dataList">
                      <td>{{item.create_time}}</td>
                      <td>{{item.id}}</td>
                      <td>{{item.title}}</td>
                      <td>{{item.link}}</td>
                      <td>{{item.photo}}</td>
                      <td>
                        <div>
                          <a class="info m-r-10" href="javascript:void(0)" @click="editInfo(item.id)">编辑</a>
                          <span class="danger edit" data-toggle="modal" data-target="#confirm1" @click="delId=item.id">删除</span>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
              </div>
              <!-- 确认取消提示框 -->
              <confirm  class="modal fade" id="confirm1" tabindex="-1" role="dialog" :confirm-msg="confirmMsg" :edit-id="delId" @yes-btn="deleteItem"></confirm>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  </div>
  {include file="common:js" /}
  <script type="text/javascript" src="/web/js/search_list.js"></script>
  <script type="text/javascript" src="/web/js/common.js"></script>
  <script src="/web/js/custom.min.js"></script>
  <script src="/web/js/jasny-bootstrap.js"></script>
  <script src="/assets/plugins/bower_components/dropify/dist/js/dropify.min.js"></script>
  {include file="common:footer" /}
  {include file="component:pagination" /}
  {include file="component:confirm" /}

  <script>
    $(document).ready(function() {
      // Basic
      $('.dropify').dropify();
      // Translated
      $('.dropify-fr').dropify({
          messages: {
            default: 'Glissez-déposez un fichier ici ou cliquez',
            replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
            remove: 'Supprimer',
            error: 'Désolé, le fichier trop volumineux'
          }
      });
      // Used events
      var drEvent = $('#input-file-events').dropify();
      drEvent.on('dropify.beforeClear', function(event, element) {
          return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
      });
      drEvent.on('dropify.afterClear', function(event, element) {
          alert('File deleted');
      });
      drEvent.on('dropify.errors', function(event, element) {
          console.log('Has Errors');
      });
      var drDestroy = $('#input-file-to-destroy').dropify();
      drDestroy = drDestroy.data('dropify')
      $('#toggleDropify').on('click', function(e) {
          e.preventDefault();
          if (drDestroy.isDropified()) {
              drDestroy.destroy();
          } else {
              drDestroy.init();
          }
      })
    });
  </script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          id: '',
          title: undefined,
          link: undefined,
          photo: undefined,
          apiUrl: "",
          searchUrl: "/dashboard/index/banner_list", //搜索接口
          draw: '', //校验字段
          dataList: [], //搜索列表数据
          trAll: 0, //数据总数
          pageAll: 0, //页码总数
          pageCur: 1, //当前页
          pageSize: 10, //每页数量
          delUrl: '/dashboard/index/delete_line', //删除请求接口
          confirmMsg: '删除当前图片信息？', //confirm提示框内容
          delId: undefined, //当前删除的零部件编号
        }
      },
      mounted() {
        this.pageTo(1)
      },
      methods: {
        // 搜索当前页并渲染列表
        pageTo(page) {
          var that = this;
          searchList2(that,page,{},(res)=>{

          },(fail)=>{

          },(error)=>{
          })
        },
        // 删除当前行
        deleteItem(){
          var that = this;
          var params = {
            id:that.delId,
            table:'banner'
          };
          deleteLine(that,params,(res)=>{},(fail)=>{},(err)=>{});
        },
        editInfo(e) {
          var that = this;
          $(".dropify-render img").remove()
          $(".dropify-preview").show()
          axios.post('/dashboard/index/get_banner', {id: e},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            if(res.data.ErrorCode == 1){
              //请求成功
              that.id = res.data.Data.id;
              that.title = res.data.Data.title;
              that.link = res.data.Data.link;
              that.photo = res.data.Data.photo;
              var img = `<img src="${res.data.Data.photo}" alt="" />`
              $(".dropify-render").append(img);
              $(".dropify-wrapper").addClass("has-preview")
            }else{
              alert(res.data.ErrorMsg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        submitEvent() {
          var that = this;
          that.photo = $(".dropify-render img").attr("src");
          var param = {
            title: that.title,
            link: that.link,
            photo: that.photo
          }
          if(that.id != '') {
            param.id = that.id
          }
          axios.post('/dashboard/index/add_edit_banner', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.ErrorCode == 1){
              //请求成功
              alert(res.data.ErrorMsg);
              that.id = '';
              that.title = '';
              that.link = '';
              that.photo = '';
              $(".dropify-render img").remove()
              $(".dropify-preview").hide()
              that.pageTo(that.pageCur)
            }else{
              alert(res.data.ErrorMsg)
            }
          }).catch(err => {
            console.log(err);
          })
        }
      }
    })
  </script>
</body>

</html>
